<script setup>
// 引入 toRefs
import { reactive, toRefs } from 'vue';

// 定义对象格式的响应式数据
const user = reactive({ name: 'bingo', age: 18 });

// 解构赋值需要使用toRefs保持响应式
const { name, age } = toRefs(user);
</script>

<template>
  <div style="border: 1px solid red; margin: 16px; padding: 16px">
    <h1>name: {{ name }}, age: {{ age }}</h1>
    <button @click="age++">过年了</button>
  </div>
</template>
